﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/Content/css/comon0.css">
    <link rel="stylesheet" href="/Content/css/index.css">

    <title>展示</title>
    <script type="text/javascript" src="/Content/js/jquery.js"></script>
    <style>
        body {
            background: url("../Content/img/bg.jpg");
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .head {
            height: 100px;
            background: url(../Content/img/head_bg.png) no-repeat center center;
            background-size: 100% 100%;
            position: relative;
            z-index: 100;
        }

            .head h1 {
                color: #fff;
                text-align: center;
                font-size: 35px;
            }

        .weather {
            position: absolute;
            right: .3rem;
            top: 30px;
            line-height: .75rem;
        }

            .weather span {
                color: rgba(255, 255, 255, .7);
                font-size: 20px;
                font-family: "微软雅黑";
            }

        .map {
            padding-left: 50%;
        }

        #b1 {
            background: transparent;
            color: #fff;
        }

        #s1 {
            width: 153px;
            margin-left: 100px;
        }

        #s2 {
            margin-left: 200px;
        }

        .box {
            height: 710px;
            margin: -10px 0;
        }

        .fix {
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            margin: 48px 93px;
        }
    </style>
</head>
<script>
   
//    $(".loading").fadeOut();
    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({
            fontSize: whei / 20
        })
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 20
            })
        });
    });
</script>

<body>

<div class="loading">
    <div class="loadbox"> <img src="/Content/img/loading.gif"> 页面加载中... </div>
</div>

<span id="showTime"></span>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.js"></script>
<!-- <script language="JavaScript" src="/Content/js/js.js"></script> -->

<!-- 统计图表 -->
<div id="app">
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 3.2rem">
                    <!-- <div class="alltitle">班级评价分布</div> -->
                    <!-- <div class="allnav" id="echart1"></div> -->
                    <!-- <div class="boxfoot"></div> -->
                    <div style="height:100%;">
                        <div class="sy" id="fb1"></div>
                        <div class="sy" id="fb2"></div>
                        <div class="sy" id="fb3"></div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">课程评教结果</div>
                    <div class="allnav" id="echart2"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div style="height:100%;">
                        <div class="sy" style="width: 50%;" id="fb5"></div>
                        <div class="sy" style="width: 50%;" id="fb4"></div>
                    </div>
                     <div class="boxfoot"></div> 
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox box" style="width: 39%;">
                        <div class="search-box">
                            <input  v-on:keyup.enter="search" v-model="searchString" class="search-txt" type="text" placeholder="请输入查询姓名 按下回车搜索" onfocus="this.placeholder=''" onblur="this.placeholder='请输入查询姓名 按下回车搜索'">
                        </div>
                        <div class="htile">
                            <ul>
                                <li>
                                    <h1>{{selectedTeacherName}}</h1>
                                </li>
                            </ul>
                        </div>
                        <div class="search-box sebox result">
                            <ul style="font-family:'微软雅黑'">
                                <li v-for="item in searchRes" 
                                    @click="selectTeacher(item.id,item.name)" 
                                    :key="item.id" 
                                    :id="item.id==tidNow?'selected':''">
                                    <div :value="item.id">{{item.name}}</div>
                                </li>
                                
                            </ul>
                        </div>
                        
                    </div>
                    <div class="map" style="margin-top: 66px;">
                        <div class="map1"><img src="/Content/img/lbx.png"></div>
                        <div class="map2"><img src="/Content/img/jt.png"></div>
                        <div class="map3"><img src="/Content/img/map.png"></div>
                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:3.4rem">
                    <div class="alltitle">年度评价走势图(点击查看详情)</div>
                    <div class="allnav" id="echart4"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">等级（优良差）次数比例饼图</div>
                    <div class="allnav" id="echart5"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall all" style="height: 3rem">
                    <div class="alltitle">综合成绩展示平均分</div>
                    <div class="barbox">
                        <ul class="clearfix fix">
                            <li class="pulll_left counter num" style="font-size: 100px;">{{data.rightData.TotalScore}}</li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>

</div>

<script src="../Content/js/layer/layer.js"></script>
<script>
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    };

    var vue = new Vue({
        el: "#app",
        mounted() {
            this.tidNow = getQueryString("tid");

            this.bindData(this.tidNow);
        },
        data() {
            return {
                tidNow: 0,
                searchString: '',
                selectedTeacherName:'',
                searchRes: [],
                data: {
                    e2: {},
                    leftDown: {},
                    rightData: {},
                },
                level: ['优秀', '良好', '一般', '较差'],
                studyYearList: [],
                score:0
            };
        },
        methods: {
            bindData(tid) {
                var index = layer.load(1);
                $.get('/api/detail/getteacherinfo',
                    { tid},
                    (res) => {
                        
                        this.selectedTeacherName = res.teacherName;
                        this.tidNow = res.teacherId;
                        this.data.e2 = res.leftCenter;
                        this.data.leftDown = res.leftDown;
                        this.data.rightData = res.rightData;
                        // 排除NaN
                        this.data.rightData.Trend = this.data.rightData.Trend.map(r => r === "NaN" ? 0: r);
                        this.data.studyYearList = res.studyYear;
                        $(".loading").fadeOut();
                        layer.close(index);
                        this.echarts_2();
                        this.leftDown_1();
                        this.leftDown_2();
                        this.leftDown_3();
                        this.leftDown_4();
                        this.leftDown_5();
                        this.rightUp();
                        this.rightCenter();
                    });
            },

            search() {
                if (this.searchString=='') {
                    return;
                }

                $.get("/api/detail/searchteacher",
                    { name: this.searchString },
                    (res)=> {
                        console.log(res);
                        this.searchRes = res;
                    });
            },
            selectTeacher(id,name) {
                console.log(id, name);
                if (id===this.data.tidNow) {
                    return;
                }
                this.data.tidNow = id;
                this.data.teacherName = name;
                this.bindData(id);
            },
            echarts_2() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echart2'));

                let option = {
                    //  backgroundColor: '#00265f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { type: 'shadow' }
                    },
                    grid: {
                        left: '0%',
                        top: '10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.data.e2.title,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            rotate:50,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '6'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            //formatter: '{value} %'
                            show: true,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1	)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [
                        {

                            type: 'bar',
                            data: this.data.e2.value,
                            barWidth: '70%', //柱子宽度
                            // barGap: 1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color: '#27d08a',
                                    opacity: 1,
                                    barBorderRadius: 5,
                                }
                            }
                        }

                    ]
                };
                console.log(option);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            leftDown_1() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('fb1'));
                let option = {

                    title: [{
                        text: '学生评教',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {

                        top: '70%',
                        itemWidth: 10,
                        itemHeight: 10,
                        data: this.level,
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '14',
                        }
                    },
                    series: [
                        {
                            name: '学生评教',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: this.data.leftDown.studentEva
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            leftDown_2() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('fb2'));
                let option = {

                    title: [{
                        text: '教研室领导评教',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {

                        top: '70%',
                        itemWidth: 10,
                        itemHeight: 10,
                        data: this.level,
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '14',
                        }
                    },
                    series: [
                        {
                            name: '教研室评教',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: this.data.leftDown.courseLeaderEva
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            leftDown_3() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('fb3'));
                let option = {
                    title: [{
                        text: '系部领导评教',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {
                        top: '70%',
                        itemWidth: 10,
                        itemHeight: 10,
                        data: this.level,
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '14',
                        }
                    },
                    series: [
                        {
                            name: '领导评教',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: this.data.leftDown.departMentEva
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            leftDown_4() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('fb4'));
                let option = {
                    title: [{
                        text: '教师互评',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {
                        top: '70%',
                        itemWidth: 10,
                        itemHeight: 10,
                        data: this.level,
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '14',
                        }
                    },
                    series: [
                        {
                            name: '领导评教',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: this.data.leftDown.teacherEva
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            leftDown_5() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('fb5'));
                let option = {
                    title: [{
                        text: '教师自评',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        }

                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)",
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        }
                    },
                    legend: {
                        top: '70%',
                        itemWidth: 10,
                        itemHeight: 10,
                        data: this.level,
                        textStyle: {
                            color: 'rgba(255,255,255,.5)',
                            fontSize: '14',
                        }
                    },
                    series: [
                        {
                            name: '领导评教',
                            type: 'pie',
                            center: ['50%', '42%'],
                            radius: ['40%', '60%'],
                            label: { show: false },
                            labelLine: { show: false },
                            data: this.data.leftDown.selfEva
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },

            rightUp() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echart4'));

                let option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: "{b}综合评分: {c}",
                        axisPointer: {
                            lineStyle: {
                                color: '#dddc6b'
                            }
                        }
                    },
//                    legend: {
//                        top: '0%',
//                        data: ['安卓', 'IOS'],
//                        textStyle: {
//                            color: 'rgba(255,255,255,.5)',
//                            fontSize: '12',
//                        }
//                    },
                    grid: {
                        left: '10',
                        top: '30',
                        right: '10',
                        bottom: '10',
                        containLabel: true
                    },

                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.2)'
                            }

                        },

                        data: this.data.studyYearList

                    }, {

                        axisPointer: { show: false },
                        axisLine: { show: false },
                        position: 'bottom',
                        offset: 20,
                    }],

                    yAxis: [{
                        type: 'value',
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 12,
                            },
                        },

                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        }
                    }],
                    series: [
                        {
                            name: '趋势',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {

                                normal: {
                                    color: '#0184d5',
                                    width: 2
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(1, 132, 213, 0.4)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(1, 132, 213, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#0184d5',
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            data: this.data.rightData.Trend
                        }
                    ]

                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.on('click',
                    params => {
                        console.log(params);
                        var index = layer.open({
                            type: 2,
                            content: 'http://layim.layui.com',
                            area: ['320px', '195px']
                        });
                        layer.full(index);
                    });
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            rightCenter() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echart5'));

                option = {
                    title: {
                        text: '',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        textStyle:{
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                        data: this.data.level
                    },
                    series: [
                        {
                            name: '评教等级次数',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: this.data.rightData.LevelNum,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
        
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        }
    });
</script>
</body>
</html>